<template>
  <div class="Consumptionbox">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <el-form ref="form" label-position="left" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6" style="display:flex;margin-top: 4px;">
                  <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                  </el-radio-group>
                  <el-date-picker style="flex:1;" v-if="radio3=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small"></el-date-picker>
                  <el-date-picker style="flex:1;" v-if="radio3=='3'" v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small"></el-date-picker>
                </el-col>
                <el-col :span="18" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button size="small" type="primary" @click="gettablelist(treevalue)">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="rightbutton">
        <div class="titlebox">
          <div>
            <i :style="{color:isshow?'#007cee':''}" @click="toimg" class="iconfont icon-zhuzhuangtutubiao"></i>
            <i :style="{color:isshows?'#007cee':''}" @click="totab" class="iconfont icon-biaoge"></i>
          </div>
          <div class="righttitle">
            <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <div class="tabandech">
          <div class="echartbox" v-show="isshow">
            <div class="fadianlv" ref="fadianlv"></div>
            <div class="fuzhaodu" ref="fuzhaodu"></div>
          </div>
          <div class="tablebox" v-show="isshows">
            <el-table
              :data="tableData"
              :size="issize"
              border
              :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
              v-loading="loading"
              height="calc(100% - 1px)"
              style="width: 100%">
              <template slot="empty">
                <el-empty description="暂无数据"></el-empty>
              </template>
              <el-table-column
                label="序号"
                align="center"
                type="index"
                width="100">
              </el-table-column>
              <el-table-column
                prop="dateString"
                align="center"
                label="日期">
              </el-table-column>
              <el-table-column
                prop="cityPower"
                align="right"
                label="市电">
              </el-table-column>
              <el-table-column
                prop="solarPower"
                align="right"
                label="光伏发电">
              </el-table-column>
              <el-table-column
                prop="netPower"
                align="right"
                label="上网电量">
              </el-table-column>
              <el-table-column
                prop="selfPower"
                align="right"
                label="自用电量">
              </el-table-column>
              <el-table-column
                prop="consumptionRatio"
                align="right"
                label="消纳率">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NocheckTree from '../../monitor/component/NocheckTree.vue'
import TopTile from '@/components/TopTitle/index.vue'
import * as echarts from 'echarts';
import { exportexcel } from '@/utils/excel'
import {geixiaonajieguoapi,getxiaonagouchengapi,getxiaonatableapi} from '@/api/Photovoltaic/analysis/Consumption'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    NocheckTree
  },
  data() {
    return {
      loading:false,
      isshow:true,
      isshows:false,
      radio3: '2',
      value2:[],
      value3: [],
      issize: 'medium',
      tableData: [],
      treevalue:{}
    };
  },

  async mounted() {
    this.gettime()
  },

  methods: {
    // 查询
    async gettablelist(val) {
      this.getfadianlv(val)
      this.getfuzhaodu(val)
      this.loading=true
      const { data: { list } } = await getxiaonatableapi({
        classId:val.id,dateString:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3
      })
      this.tableData=list
      this.loading=false
    },
    // 树节点点击
    handleNodeClicks(val) {
      this.treevalue=val
      this.gettablelist(val)
    },
    // 重置
    chongzhi() { 
      this.radio3 = '2'
      this.gettime()
      this.gettablelist(this.treevalue)
    },
    toimg() {
      this.isshow=true;
      this.isshows=false;
    },
    totab() {
      this.isshows=true;
      this.isshow=false;
    },
    // 获取发电构成图表
    async getfadianlv(val) {
      var chartDom = this.$refs.fadianlv
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { list } } = await getxiaonagouchengapi({
        classId:val.id,dateString:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3
      })
      const timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].datalist.length > 0) {
              list[i].datalist.forEach(data => {
                timePoints.push(data.timeReading);
              });
              break;
          }
      }
      option = {
        color:['#5087ec','#b8e412','#58a55c'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '发电构成',
            nameTextStyle:{
              color:'#000',
              fontSize:16,
              padding:[0,40,10,0]
            }
          },
          {
            type: 'value',
            name: '',
          }
        ],
        series: [
          {
            name: '上网电量',
            type: 'bar',
            data: list.filter(ele=>ele.name=='上网电量')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '自用电量',
            type: 'bar',
            data: list.filter(ele=>ele.name=='自用电量')[0].datalist.map(ele=>ele.valueReading)
          },
          {
            name: '消纳率',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: list.filter(ele=>ele.name=='消纳率')[0].datalist.map(ele=>ele.valueReading)
          }
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 获取用电构成图表
    async getfuzhaodu(val) {
      var chartDom = this.$refs.fuzhaodu
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { list } } = await geixiaonajieguoapi({
        classId:val.id,dateString:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3
      })
      const series = list.map(ele => {
        return {
              name: ele.name,
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                  focus: 'series'
              },
              data: ele.datalist.map(ele=>ele.valueReading)
         }
      })
      const timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].datalist.length > 0) {
              list[i].datalist.forEach(data => {
                timePoints.push(data.timeReading);
              });
              break;
          }
      }
      option = {
        color:['#5087ec','#b8e412'],
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            show: false
        },
        grid: {
          left: '2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
        xAxis: [
            {
              type: 'category',
              data: timePoints
            }
        ],
        yAxis: [
            {
              type: 'value',
              name:'用电构成',
              nameTextStyle:{
                color:'#000',
                fontSize:16,
                padding:[0,40,10,0]
              }
            }
        ],
        series: series
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 导出
    daochu() {
      exportexcel('pes-microservice-biz/pes/run/analysis/consumption/exportExcel', {
        classId:this.treevalue.id,dateString:this.radio3=='2'?this.value2:this.value3,dateType:this.radio3
      },'消纳率分析')
    },
    // 刷新
    shuaxin() {
      this.gettablelist(this.treevalue)
      this.$message.success('列表刷新成功')
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      this.$set(this,'value2',year+'-'+month)
      this.$set(this,'value3',year.toString())
    },
  },
};
</script>

<style scoped>
.Consumptionbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    margin-right: 10px;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    .righttop{
      height:80px;
      background-color: #fff;
      padding:  20px;
      margin-bottom: 10px;
    }
    .rightbutton{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .titlebox{
      display: flex;
      justify-content:space-between;
      align-items: center;
      margin-bottom: 10px;
      i{
          margin-right: 15px;
          font-size: 18px;
        }
        i:hover{
        cursor:pointer ;
        color: #1890ff;
       }
      .righttitle{
        display: flex;
        align-items: center;
      }
        .text{
          margin: 0 20px;
        }
        .wen{
          cursor:pointer ;
          padding-bottom: 2px;
        }
        .wen:hover{
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
        }
      }
      .tabandech{
        height: 95%;
        .echartbox, .tablebox{
          height: 100%;
        }
        .echartbox{
          .fadianlv, .fuzhaodu{
            height: 50%;
          }
        }
      }
    }
  }
}
</style>